<template>
  <div class="text-table">
    <a-tabs default-active-key="1" @change="callback">
      <!-- 全文数据 -->
      <a-tab-pane key="1" tab="全文数据">
        <el-table
          :data="fullTableData"
          highlight-current-row
          border
          height="100%"
          :row-style="{height:'40px'}"
          :cell-style="{padding:'0px'}"
          :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <slot v-for="(item,index) in fullColumns">
            <el-table-column
              :key="index"
              :property="item.field"
              :label="item.title"
              :width="item.width"
              show-overflow-tooltip
              sortable>
            </el-table-column>
          </slot>
          <el-table-column
            label="操作"
            width="200">
            <template>
              <a @click="onClickVerb('打开全文')">预览</a>
              <a-divider type="vertical" />
              <a>下载</a>
              <a-divider type="vertical" />
              <a>删除</a>
            </template>
          </el-table-column>
        </el-table>
      </a-tab-pane>
      <!-- 基础元数据 -->
      <a-tab-pane key="2" tab="基础元数据">
        <el-table
          :data="meta1TableData"
          highlight-current-row
          border
          height="100%"
          :row-style="{height:'40px'}"
          :cell-style="{padding:'0px'}"
          :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
          style="width: 100%">
          <el-table-column
            type="index">
          </el-table-column>
          <slot v-for="(item,index) in meta1Columns">
            <el-table-column
              :key="index"
              :property="item.field"
              :label="item.title"
              :width="item.width"
              show-overflow-tooltip
              sortable>
            </el-table-column>
          </slot>
        </el-table>
      </a-tab-pane>
      <!-- 流转元数据 -->
      <a-tab-pane key="3" tab="流转元数据">
        <el-table
          :data="meta1TableData"
          highlight-current-row
          border
          height="100%"
          :row-style="{height:'40px'}"
          :cell-style="{padding:'0px'}"
          :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
          style="width: 100%">
          <el-table-column
            type="index">
          </el-table-column>
          <slot v-for="(item,index) in meta1Columns">
            <el-table-column
              :key="index"
              :property="item.field"
              :label="item.title"
              :width="item.width"
              show-overflow-tooltip
              sortable>
            </el-table-column>
          </slot>
        </el-table>
      </a-tab-pane>
      <!-- 全文元数据 -->
      <a-tab-pane key="4" tab="全文元数据">
        <el-table
          :data="meta1TableData"
          highlight-current-row
          border
          height="100%"
          :row-style="{height:'40px'}"
          :cell-style="{padding:'0px'}"
          :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
          style="width: 100%">
          <el-table-column
            type="index">
          </el-table-column>
          <slot v-for="(item,index) in meta1Columns">
            <el-table-column
              :key="index"
              :property="item.field"
              :label="item.title"
              :width="item.width"
              show-overflow-tooltip
              sortable>
            </el-table-column>
          </slot>
        </el-table>
      </a-tab-pane>
      <!-- 四性检测记录 -->
      <a-tab-pane key="5" tab="四性检测记录">
        <el-table
          :data="checkTableData"
          highlight-current-row
          border
          height="100%"
          :row-style="{height:'40px'}"
          :cell-style="{padding:'0px'}"
          :header-cell-style="{background: '#FAFAFA', padding: 0, height: '40px', color: '#666666'}"
          style="width: 100%">
          <el-table-column
            type="index">
          </el-table-column>
          <slot v-for="(item,index) in checkColumns">
            <el-table-column
              :key="index"
              :property="item.field"
              :label="item.title"
              :width="item.width"
              show-overflow-tooltip
              sortable>
            </el-table-column>
          </slot>
        </el-table>
      </a-tab-pane>

      <!-- 全文按钮操作 -->
      <a-dropdown slot="tabBarExtraContent" placement="bottomRight" v-if="isShowTextVerb" style="margin-right: 16px;">
        <a-button type="primary" icon="file-text">全文操作</a-button>
        <a-menu slot="overlay">
          <template v-for="(item, key) in textVerb">
            <a-menu-item :key="key" :disabled="item.status" v-if="item.show" @click="onClickVerb(item.title)">
              <span class="icon iconfont" :class="item.icon" style="margin-right: 6px;"></span>{{ item.title }}
              <input
                v-if="item.title==='挂接全文'"
                ref="uploadFiles"
                multiple
                type="file"
                @change="uploadFile"
                style="display:none" />
            </a-menu-item>
            <a-menu-divider :key="item.title" v-if="key!==textVerb.length - 1" />
          </template>
        </a-menu>
      </a-dropdown>
    </a-tabs>

    <!-- 全文导出加载动画 -->
    <div class="loading-style" v-if="loading.visible">
      <a-spin :tip="loading.tip" :spinning="loading.visible"></a-spin>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      fullTableData: [ // 全文表格数据
        {
          AI_Index: 1,
          AI_Name: '脊背.xls',
          AI_Size: 19456,
          AI_UploadDateTime: '2020-06-01',
          AI_FileDateTime: '2020-06-01',
          AI_IsOCR: ''
        },
        {
          AI_Index: 2,
          AI_Name: '案卷分类批量导出.xls',
          AI_Size: 6651819,
          AI_UploadDateTime: '2020-06-02',
          AI_FileDateTime: '2020-06-02',
          AI_IsOCR: ''
        },
        {
          AI_Index: 3,
          AI_Name: '卷内目录.xls',
          AI_Size: 13824,
          AI_UploadDateTime: '2020-06-03',
          AI_FileDateTime: '2020-06-03',
          AI_IsOCR: ''
        },
        {
          AI_Index: 4,
          AI_Name: '315066.jpg',
          AI_Size: 188803,
          AI_UploadDateTime: '2020-06-04',
          AI_FileDateTime: '2020-06-04',
          AI_IsOCR: ''
        }
      ],
      fullColumns: [ // 全文表格表头数据
        {
          title: '顺序号',
          field: 'AI_Index'
        },
        {
          title: '文件名',
          field: 'AI_Name'
        },
        {
          title: '文件大小',
          field: 'AI_Size'
        },
        {
          title: '上传时间',
          field: 'AI_UploadDateTime'
        },
        {
          title: '创建时间',
          field: 'AI_FileDateTime'
        },
        {
          title: 'OCR状态',
          field: 'AI_IsOCR'
        }
      ],
      meta1TableData: [
        { Name: '电子档案号', Value: 'YX1000·SHHQG·JJ·JG-0001' },
        { Name: '事项类型', Value: 'YX1000' },
        { Name: '事项编码', Value: 'SHHQG' },
        { Name: '事项名称', Value: 'JJ' },
        { Name: '办理对象名称', Value: '档案部' },
        { Name: '办理对象编号', Value: 'JG' },
        { Name: '申请时间', Value: '2020-08-20' },
        { Name: '受理时间', Value: '2020-08-20' },
        { Name: '保管期限', Value: '永久' },
        { Name: '文件数量', Value: '20' }
      ],
      meta1Columns: [
        {
          title: '键',
          field: 'Name'
        },
        {
          title: '键值',
          field: 'Value'
        }
      ],
      checkTableData: [
        {
          C_Type: '可用性检测',
          C_Content: '流转单.docx',
          C_Result: '文件可用性检测成功：流转单.docx'
        },
        {
          C_Type: '真实性检测',
          C_Content: '流转单.docx',
          C_Result: '文件真实性检测成功：流转单.docx'
        },
        {
          C_Type: '安全性',
          C_Content: '流转单.docx',
          C_Result: '文件安全性检测成功：流转单.docx'
        }
      ],
      checkColumns: [
        {
          title: '检测类别',
          field: 'C_Type'
        },
        {
          title: '检测内容',
          field: 'C_Content'
        },
        {
          title: '检测结果',
          field: 'C_Result'
        }
      ],
      textVerb: [ // 全文表格按钮集合
        { title: '挂接全文', icon: 'icon-lianjie', status: false, show: true },
        { title: '删除全文', icon: 'icon-shanchu', status: false, show: true },
        { title: '打开全文', icon: 'icon-dakaigongcheng', status: false, show: true },
        { title: '全文OCR', icon: 'icon-saomiao', status: false, show: true },
        { title: '下载全文', icon: 'icon-xiazai', status: false, show: true },
        { title: '复制全文', icon: 'icon-fuzhi', status: false, show: true },
        { title: '粘贴全文', icon: 'icon-niantie', status: false, show: true }
      ],
      isShowTextVerb: true,
      loading: {
        tip: '正在生成预览文件...',
        visible: false
      }
    }
  },
  created () {
  },
  mounted () {
  },
  methods: {
    callback (key) {
      if (key === '1') {
        this.isShowTextVerb = true
      } else {
        this.isShowTextVerb = false
      }
    },
    // 全文按钮事件
    onClickVerb (val) {
      switch (val) {
        case '挂接全文':
          console.log('挂接全文')
          this.$refs.uploadFiles[0].click()
          break
        case '删除全文':
          console.log('删除全文')
          var this_ = this
          this.$confirm({
            title: '提示',
            content: '此操作将永久删除该文件, 是否继续?',
            okText: '确认',
            cancelText: '取消',
            onOk () {
              this_.$message.success('删除成功')
            }
          })
          break
        case '打开全文':
          console.log('打开全文')
          this.loading.visible = true
          setTimeout(() => {
            this.loading.visible = false
            var routeData = this.$router.resolve({ path: '/preview', query: { name: '打开全文' } })
            window.open(routeData.href, '_blank')
          }, 2000)
          break
        case '全文OCR':
          console.log('全文OCR')
          break
        case '下载全文':
          console.log('下载全文')
          break
        case '复制全文':
          console.log('复制全文')
          this.$message.success('复制全文')
          break
        case '粘贴全文':
          console.log('粘贴全文')
          this.$message.success('粘贴全文')
          break
      }
    },
    // 挂接全文
    uploadFile () {
      console.log(this.$refs.uploadFiles[0].files)
    }
  }
}
</script>
<style lang="less" scoped>
.text-table {
  height: 100%;
  width: 100%;
  position: relative;
  /deep/ .ant-tabs {
    height: 100%;
    width: 100%;
    .ant-tabs-bar {
      margin: 0;
    }
    .ant-tabs-content {
      height: calc(100% - 44px);
    }
  }
  .loading-style {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    top: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
